{% extends "base.html" %}
{#{% load  mytags %}#}
{#{% load   guardian_tags %}#}


{% block header-css %}
    <link href="../../static/webssh_static/css/xterm.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../static/webssh_static/css/fullscreen.min.css" rel="stylesheet" type="text/css"/>
{% endblock %}


{% block  title %}资产信息{% endblock %}


{% block page-content %}
    <a type="button" class="webssh" id="webssh">ClickMe</a>

    {% block footer-js %}
        <script src="../../static/webssh_static/js/xterm.min.js"></script>
        <script src="../../static/webssh_static/js/fullscreen.min.js"></script>
        <script src="/static/js/jquery-3.1.1.min.js"></script>

        <script>       jQuery(function ($) {


                 {#$(document).on('click','.webssh',function (event) {#}
                 $('.webssh').click(function (event) {
                        console.log(111);


                        event.preventDefault();

                        {#var id_a = $(this).parent().parent().attr('id');#}

                        $.ajax({
                            headers: {"X-CSRFToken": '{{ csrf_token }}'},
                            url: "/asset_web_ssh/",
                            type: 'POST',
                            data: {'id': 1},
                            success: function (ret) {

                                {#var obj = JSON.parse(ret);#}
                                {#var ips = obj.ip;#}
                                {#var ports = obj.port;#}
                                {#var usernames = obj.username;#}
                                {#var passwords = obj.password;#}

                                {#var obj = JSON.parse(ret);#}
                                var ips = '192.168.32.133';
                                var ports = '22';
                                var usernames = 'chenann';
                                var passwords = '1';

                                $.ajax({
                                    {#url: "http://{{ Webssh }}:{{ Webssh_port }}/",#}
                                    url: "http://192.168.32.133:9000/",
                                    type: 'POST',
                                    data: {hostname: ips, port: ports, username: usernames, password: passwords},
                                    crossDomain: true,
                                    success: callback
                                });

                                    function current_geometry() {
                                        cols = parseInt(window.innerWidth / 10);
                                        rows = parseInt(window.innerHeight / 24);
                                        return [cols, rows];
                                      }



                                function callback(msg) {
                                    console.log(msg);
                                    if (msg.status) {
                                          swal("错误", "登陆" + "[ " + msg.status + " ]" + "遇到错误", "error");
                                          return;
                                    }





                                    var    url = "ws://192.168.32.133:9000/" + 'ws?id=' + msg.id,
                                        socket = new WebSocket(url),
                                        terminal = document.getElementById('#terminal'),
                                        geometry = current_geometry();
                                        term = new Terminal({cursorBlink: true,  cols: geometry[0], rows: geometry[1]});

                                    console.log(url);
                                    term.on('data', function (data) {
                                        console.log(data);
                                        socket.send(data);
                                    });

                                    socket.onopen = function (e) {
                                        $('.container1').hide();
                                        term.open(terminal, true);
                                        term.toggleFullscreen(true);
                                    };

                                    socket.onmessage = function (msg) {
                                        console.log(msg);
                                        term.write(msg.data);
                                    };

                                    socket.onerror = function (e) {
                                        console.log(e);
                                    };

                                    socket.onclose = function (e) {
                                        console.log(e);
                                        term.destroy();
                                        $('.container1').show();
                                        // status.text(e.reason);
                                    };
                                }


                                                $(window).resize(function(){
                        if (typeof term != "undefined") {
                           geometry = current_geometry();
                           term.geometry = geometry;
                           term.resize(geometry[0], geometry[1]);
                         }
                       });

                            }
                        });
                    });
                });

            </script>
    {% endblock %}

{% endblock %}